// 园区概况

import {
    fitChartSize,
    fitSliderSizeHeight,
    fitSliderSizeWidth,
} from "@/utils/styleUtil.js";
import * as Echarts from "echarts";

let general = {
    // 0 企业信息================
    columns01: [
        {
            label: "企业名称",
            prop: "title",
            // text_align: "text_left",
            isClick: true,
            width: "145",
            textColor: "#fffff",
        },
        {
            label: "危险源数量",
            prop: "col2",
            width: "120",
            headIcon: {
                color: "#ffffff",
                iconCss: "icon-paixu3",
            },
        },
        {
            label: "安全四色",
            prop: "col3",
            width: "120",
            // text_align: "text_right",
            isSlot: true,
            headIcon: {
                color: "#ffffff",
                iconCss: "icon-paixu3",
            },
        },
        {
            label: "定位",
            prop: "col4",
            isClick: true,
            width: "55",
            // text_align: "text_right",
            textColor: "#2EF7FC",
            isIcon: true,
            iconCss: {
                name: "icon-dingwei3",
                color: "#2EF7FC",
            },
        },
    ],
    danger_level_option: {
        grid: {
            top: 0,
            bottom: 0,
            left: fitChartSize(0),
            right: fitChartSize(0),
            // containLabel: true,
        },
        color: ["#E74023", "#FFA800", "#FFE926", "#00A8FF"],
        tooltip: {
            trigger: "item",
        },
        legend: {
            show: true,
            top: "middle",
            right: fitChartSize(5),
            orient: "vertical",
            textStyle: {
                fontSize: fitChartSize(12),
                fontFamily: "SourceHanSansCN-Regular",
                fontWeight: 400,
                color: "#FFFFFF",
                textStyle: {
                    rich: {
                        a: {
                            align: "left",
                            width: 50,
                        },
                        b: {
                            align: "left",
                            fontWeight: "bold",
                            width: 40,
                        },
                    },
                },
            },
        },

        align: "center",
        triggerEvent: true,
        series: [
            {
                type: "pie",
                left: 0,
                radius: ["50%", "75%"],
                avoidLabelOverlap: false,
                label: {
                    show: false,
                    position: "center",
                    formatter: "\n" + "\n" + "{num|{c}}" + "\n" + "{title|{b}}",
                    rich: {
                        title: {
                            // fontSize: fitChartSize(21),
                            fontSize: fitChartSize(20),
                            color: "white",
                            fontStyle: "normal",
                            fontWeight: 400,
                        },
                        num: {
                            // fontSize: fitChartSize(15),
                            fontSize: fitChartSize(28),
                            color: "#2EF7FC",
                            fontFamily: "DIN",

                            fontStyle: "normal",
                            fontWeight: "700",
                            lineHeight: fitChartSize(28),
                            /* identical to box height, or 100% */
                            textTransform: "uppercase",

                            backgroundClip: "text",
                            textFillColor: "transparent",
                        },
                    },

                    height: fitChartSize(140),
                    width: fitChartSize(140),
                    lineHeight: fitChartSize(25),
                },
                emphasis: {
                    label: {
                        show: true,
                        fontSize: fitChartSize(18),
                        fontWeight: "bold",
                    },
                },
                labelLine: {
                    show: false,
                },
            },
        ],
    },
    dangerBar: {
        grid: {
            left: fitChartSize(10),
            right: fitChartSize(1),
            top: fitChartSize(40),
            bottom: fitChartSize(30),
            containLabel: true,
        },
        xAxis: {
            type: "category",
            name: "                               危险源数量",
            nameLocation: "middle",
            nameGap: fitChartSize(35),
            nameTextStyle: {
                color: "#ffffff",
                align: "left",
            },
            data: ["20以下", "20-40", "40-60", "60-80", "80-以上"],
            max: 4,
            splitNumber: 5,
            axisLine: {
                // 坐标轴 轴线
                show: true, // 是否显示
                // ------   线 ---------
                lineStyle: {
                    color: "#ffff",
                    width: 1,
                    type: "solid",
                },
            },
        },
        yAxis: {
            type: "value",
            name: "企业数量",
            nameLocation: "end",
            nameTextStyle: {
                color: "#ffffff",
            },
            splitNumber: 4,
            axisLine: {
                // 坐标轴 轴线
                show: true, // 是否显示
                // ------   线 ---------
                lineStyle: {
                    color: "#ffff",
                    width: 1,
                    type: "solid",
                },
            },
            splitLine: {
                lineStyle: {
                    color: "#ffffff",
                    type: "dashed",
                    width: 1,
                    opacity: 0.2
                },
            },
        },
        series: [
            {
                type: "bar",
                barWidth: fitChartSize(20),
                itemStyle: {
                    color: new Echarts.graphic.LinearGradient(0, 0, 0, 1, [
                        {
                            offset: 1,
                            color: "#169FC4",
                        },
                        {
                            offset: 0,
                            color: "#10DAD3",
                        },
                    ]),
                },
            },
        ],
    },
    // 1园区规划====================
    // 2安全管理体系====================
    columns2: [
        {
            label: "序号",
            prop: "title",
            width: 60,
        },
        {
            label: "文件名称",
            prop: "col2",
        },
    ],
    // 3禁限控目录====================
    columns3: [
        {
            label: "表头",
            prop: "title",
            width: 55,
        },
        {
            label: "危险化学品目录序号",
            prop: "col2",
        },
        {
            label: "品名",
            prop: "col3",
        },
        {
            label: "别名",
            prop: "col4",
        },
        {
            label: "CAS号",
            prop: "col5",
        },
        {
            label: "备注",
            prop: "col6",
        },
    ],
    // 4两重点一重大====================
    columns41: [
        {
            label: "序号",
            prop: "title",
            width: 55,
        },
        {
            label: "企业名称",
            prop: "col2",
        },
        {
            label: "企业类型",
            prop: "col3",
            isSlot: true,
        },
        {
            label: "企业性质",
            prop: "col4",
            isSlot: true,
        },
        {
            label: "企业人数",
            prop: "col5",
        },
        {
            label: "危险化学品种类",
            prop: "col6",
        },
        {
            label: "危险化学品品名",
            prop: "col7",
        },
        {
            label: "年产量 (年使用量或年经营量) (吨)",
            prop: "col8",
        },
        {
            label: "最大储存量(吨)",
            prop: "col9",
        },
        {
            label: "是否有自动化控制系统",
            prop: "col10",
            isSlot: true,
        },
        {
            label: "是否有应急救援预案",
            prop: "col11",
            isSlot: true,
        },
        {
            label: "备注",
            prop: "col12",
        },
    ],
    columns42: [
        {
            label: "序号",
            prop: "title",
            width: 55,
        },
        {
            label: "企业名称",
            prop: "col2",
        },
        {
            label: "企业类型",
            prop: "col3",
            isSlot: true,
        },
        {
            label: "企业性质",
            prop: "col4",
            isSlot: true,
        },
        {
            label: "企业人数",
            prop: "col5",
        },
        {
            label: "危险化工工艺名称",
            prop: "col6",
        },
        {
            label: "年使用次数",
            prop: "col7",
        },
        {
            label: "单次使用时长",
            prop: "col8",
        },
        {
            label: "是否有自动化控制系统",
            prop: "col9",
            isSlot: true,
        },
        {
            label: "是否有应急救援预案",
            prop: "col10",
            isSlot: true,
        },
        {
            label: "备注",
            prop: "col11",
        },
    ],
    columns43: [
        {
            label: "序号",
            prop: "title",
            width: 55,
        },
        {
            label: "企业名称",
            prop: "col2",
        },
        {
            label: "企业类型",
            prop: "col3",
            isSlot: true,
        },
        {
            label: "企业性质",
            prop: "col4",
            isSlot: true,
        },
        {
            label: "企业人数",
            prop: "col5",
        },
        {
            label: "重大危险源名称",
            prop: "col6",
        },
        {
            label: "是否有自动化控制系统",
            prop: "col7",
            isSlot: true,
        },
        {
            label: "是否有应急救援预案",
            prop: "col8",
            isSlot: true,
        },
        {
            label: "备注",
            prop: "col9",
        },
    ],
    // 5从业人员====================
    columns51: [
        {
            label: "企业名称",
            prop: "title",
            // text_align: "text_left",
            isClick: true,
        },
        {
            label: "从业人员数",
            prop: "col2",
            headIcon: {
                color: "#ffffff",
                iconCss: "icon-paixu3",
            },
            width: "120",
        },
        {
            label: "定位",
            prop: "col3",
            isClick: true,
            width: "60",
            // text_align: "text_right",
            textColor: "#2EF7FC",
            isIcon: true,
            iconCss: {
                name: "icon-dingwei3",
                color: "#2EF7FC",
            },
        },
    ],
    columns52: [
        {
            label: "序号",
            prop: "title",
        },
        {
            label: "企业名称",
            prop: "col2",
            width: 260,
        },
        {
            label: "部门",
            prop: "col3",
        },
        {
            label: "岗位",
            prop: "col4",
        },
        {
            label: "姓名",
            prop: "col5",
        },
        {
            label: "性别",
            prop: "col6",
        },
        {
            label: "电话",
            prop: "col7",
            width: 150,
        },
        {
            label: "岗位考核",
            prop: "col8",
        },
        {
            label: "年龄",
            prop: "col9",
        },
        {
            label: "学历",
            prop: "col10",
        },
        {
            label: "资质证书",
            prop: "col11",
            isSlot: true,
        },
    ],

    option_line: {
        grid: {
            show: false,
            left: fitChartSize(10),
            top: fitChartSize(40),
            right: fitChartSize(1),
            bottom: fitChartSize(10),
            containLabel: true,
        },
        tooltip: {
            trigger: "axis",
        },
        xAxis: {
            show: true,
            type: "category",
            data: ["2017", "2018", "2019", "2020", "2021", "2022"],
            position: "bottom",
            boundaryGap: false,
            axisLine: {
                show: true,
                lineStyle: {
                    color: "rgba(255, 255, 255, 0.2)",
                    width: 1,
                    type: "solid",
                },
                showMaxLabel: true,
            },
            splitLine: {
                show: false,
                lineStyle: {
                    color: "#192a44",
                },
                interval: 1,
            },
        },
        yAxis: {
            show: true,
            type: "value",
            name: "人数 (万)",
            nameLocation: "end",
            nameTextStyle: {
                color: "#ffffff",
            },
            position: "left",
            axisLine: {
                show: true,
                lineStyle: {
                    color: "#ffffff",
                    width: 0,
                    type: "solid",
                },
            },
            splitLine: {
                show: true,
                lineStyle: {
                    color: "#ffffff",
                    type: "dashed",
                    width: 1,
                    opacity: 0.08
                },
            },
            splitNumber: 5,
        },
        series: [
            {
                // name: item.name,
                type: "line",
                // stack: this.choiceType,
                smooth: false,
                lineStyle: {
                    color: "#2EF7FC",
                },
                areaStyle: {
                    color: new Echarts.graphic.LinearGradient(0, 0, 0, 1, [
                        {
                            offset: 0,
                            color: "rgba(46, 247, 252, 0.24)",
                        },
                        {
                            offset: 1,
                            color: "rgba(46, 247, 252, 0)",
                        },
                    ]),
                },
            },
        ],
    },
    option_bar: {
        grid: {
            left: fitChartSize(10),
            right: fitChartSize(1),
            top: fitChartSize(40),
            bottom: fitChartSize(10),
            containLabel: true,
        },
        xAxis: {
            type: "category",
            // name: "                               危险源数量",
            nameLocation: "middle",
            nameGap: fitChartSize(35),
            nameTextStyle: {
                color: "#ffffff",
                align: "left",
            },
            data: ["C区", "E区", "A区", "D区", "F区", "B区"],
            max: 5,
            splitNumber: 6,
            axisLine: {
                // 坐标轴 轴线
                show: true, // 是否显示
                // ------   线 ---------
                lineStyle: {
                    color: "rgba(255, 255, 255, 0.2)",
                    width: 1,
                    type: "solid",
                },
            },
            axisLabel: {
                color: 'rgba(255, 255, 255, 0.8)'
            }
        },
        yAxis: {
            type: "value",
            name: "人数 (万)",
            nameLocation: "end",
            nameTextStyle: {
                color: "#ffffff",
            },
            splitNumber: 4,
            axisLine: {
                // 坐标轴 轴线
                show: true, // 是否显示
                // ------   线 ---------
                lineStyle: {
                    color: "rgba(255, 255, 255, 0.2)",
                    width: 1,
                    type: "solid",
                },
            },
            axisLabel: {
                color: 'rgba(255, 255, 255, 0.8)'
            },
            splitLine: {
                lineStyle: {
                    color: "#ffffff",
                    type: "dashed",
                    width: 1,
                    opacity: 0.08
                },
            },
        },
        series: [
            {
                type: "bar",
                barWidth: fitChartSize(20),
                itemStyle: {
                    color: new Echarts.graphic.LinearGradient(0, 0, 0, 1, [
                        {
                            offset: 1,
                            color: "#169FC4",
                        },
                        {
                            offset: 0,
                            color: "#10DAD3",
                        },
                    ]),
                },
            },
        ],
    },
    option_pie1: {
        title: {
            text: "性别比例",
            textStyle: {
                color: "#ffffff",
                fontSize: fitChartSize(20),
            },
            left: "center",
            top: "middle",
        },
        tooltip: {
            trigger: "item",
            formatter: (params, ticket, callback) => {
                // $.get('detail?name=' + params.name, function (content) {
                //     callback(ticket, toHTML(content));
                // });
                return `${params.seriesName} <br/>
                        <div style="width: 10px; height:10px; background-color: ${
                            params.color
                        }; border-radius: 50%; margin-right: 5px; display:inline-block;"> </div>
                        ${params.name} : <span style="margin-left: 20px; font-weight: 700;">${(params.value * 100).toFixed(1)} % </span>`;
            },
        },

        legend: {
            show: false,
        },
        color: [
            "#D758DB",
            "#2EA7FF",
            "rgba(255, 191, 36, 1)",
            "rgba(244, 149, 79, 1)",
            "rgba(71, 42, 250, 1)",
            "rgba(2, 113, 244, 1)",
            "rgba(26, 66, 142, 1)",
            "rgba(179, 62, 204, 1)",
            "rgba(251, 56, 120, 1)",
        ],
        series: [
            {
                radius: [fitChartSize(70), fitChartSize(100)],
                left: fitChartSize(8),
                name: "性别比例",
                type: "pie",
                // roseType: "radius",
                top: "middle",
                // height: '33.33%',
                // width: 400,
                avoidLabelOverlap: false,
                selectedMode: "single", // 选中效果    multiple
                selectedOffset: 20, // 选中偏移量
                itemStyle: {
                    borderRadius: 0,
                    // borderColor: 'rgba(41, 49, 64, 0.4)',
                    borderWidth: 5,
                },
                label: {
                    show: false,
                    position: "outside",
                },
                emphasis: {
                    label: {
                        show: false,
                        fontSize: fitChartSize(14),
                        fontWeight: "400",
                        color: "#FFF",
                    },
                    itemStyle: {
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowColor: "rgba(0, 0, 0, 0.5)",
                    },
                },
                labelLine: {
                    show: false,
                },
            },
        ],
    },
    option_pie2: {
        title: {
            text: "年龄比例",
            textStyle: {
                color: "#ffffff",
                fontSize: fitChartSize(20),
            },
            left: "center",
            top: "middle",
        },
        tooltip: {
            trigger: "item",
            formatter: (params, ticket, callback) => {
                // $.get('detail?name=' + params.name, function (content) {
                //     callback(ticket, toHTML(content));
                // });
                return `${params.seriesName} <br/>
                        <div style="width: 10px; height:10px; background-color: ${
                            params.color
                        }; border-radius: 50%; margin-right: 5px; display:inline-block;"> </div>
                        ${params.name} : <span style="margin-left: 20px; font-weight: 700;">${(params.value * 100).toFixed(1)} % </span>`;
            },
        },

        legend: {
            show: false,
        },
        color: [
            "#6E6BF0",
            "#2EA7FF",
            "#2958FF",
            "#2EF7FC",
            "rgba(255, 191, 36, 1)",
            "rgba(244, 149, 79, 1)",
            "rgba(71, 42, 250, 1)",
            "rgba(2, 113, 244, 1)",
            "rgba(26, 66, 142, 1)",
            "rgba(179, 62, 204, 1)",
            "rgba(251, 56, 120, 1)",
        ],
        series: [
            {
                radius: [fitChartSize(70), fitChartSize(100)],
                left: fitChartSize(8),
                name: "年龄比例",
                type: "pie",
                // roseType: "radius",
                top: "middle",
                // height: '33.33%',
                // width: 400,
                avoidLabelOverlap: false,
                selectedMode: "single", // 选中效果    multiple
                selectedOffset: 20, // 选中偏移量
                itemStyle: {
                    borderRadius: 0,
                    // borderColor: 'rgba(41, 49, 64, 0.4)',
                    borderWidth: 5,
                },
                label: {
                    show: false,
                    position: "outside",
                },
                emphasis: {
                    label: {
                        show: false,
                        fontSize: fitChartSize(14),
                        fontWeight: "400",
                        color: "#FFF",
                    },
                    itemStyle: {
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowColor: "rgba(0, 0, 0, 0.5)",
                    },
                },
                labelLine: {
                    show: false,
                },
            },
        ],
    },
    option_pie3: {
        title: {
            text: "教育水平",
            textStyle: {
                color: "#ffffff",
                fontSize: fitChartSize(20),
            },
            left: "center",
            top: "middle",
        },
        tooltip: {
            trigger: "item",
            formatter: (params, ticket, callback) => {
                // $.get('detail?name=' + params.name, function (content) {
                //     callback(ticket, toHTML(content));
                // });
                return `${params.seriesName} <br/>
                        <div style="width: 10px; height:10px; background-color: ${
                            params.color
                        }; border-radius: 50%; margin-right: 5px; display:inline-block;"> </div>
                        ${params.name} : <span style="margin-left: 20px; font-weight: 700;">${(params.value * 100).toFixed(1)} % </span>`;
            },
        },

        legend: {
            show: false,
        },
        color: [
            "#2EA7FF",
            "#2958FF",
            "#2EF7FC",
            "#6E6BF0",
            "#DB5860",
            "rgba(255, 191, 36, 1)",
            "rgba(244, 149, 79, 1)",
            "rgba(71, 42, 250, 1)",
            "rgba(2, 113, 244, 1)",
            "rgba(26, 66, 142, 1)",
            "rgba(179, 62, 204, 1)",
            "rgba(251, 56, 120, 1)",
        ],
        series: [
            {
                radius: [fitChartSize(70), fitChartSize(100)],
                left: fitChartSize(8),
                name: "教育水平",
                type: "pie",
                // roseType: "radius",
                top: "middle",
                // height: '33.33%',
                // width: 400,
                avoidLabelOverlap: false,
                selectedMode: "single", // 选中效果    multiple
                selectedOffset: 20, // 选中偏移量
                itemStyle: {
                    borderRadius: 0,
                    // borderColor: 'rgba(41, 49, 64, 0.4)',
                    borderWidth: 5,
                },
                label: {
                    show: false,
                    position: "outside",
                },
                emphasis: {
                    label: {
                        show: false,
                        fontSize: fitChartSize(14),
                        fontWeight: "400",
                        color: "#FFF",
                    },
                    itemStyle: {
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowColor: "rgba(0, 0, 0, 0.5)",
                    },
                },
                labelLine: {
                    show: false,
                },
            },
        ],
    },

    // 6值班值守====================
    columns61: [
        {
            label: "企业名称",
            prop: "title",
            // text_align: "text_left",
            isClick: true,
        },
        {
            label: "值班人数",
            prop: "col2",
            headIcon: {
                color: "#ffffff",
                iconCss: "icon-paixu3",
            },
            width: "120",
        },
        {
            label: "定位",
            prop: "col3",
            isClick: true,
            width: "60",
            // text_align: "text_right",
            textColor: "#2EF7FC",
            isIcon: true,
            iconCss: {
                name: "icon-dingwei3",
                color: "#2EF7FC",
            },
        },
    ],
    // 7事故事件====================
    columns71: [
        {
            label: "企业名称",
            prop: "title",
            // text_align: "text_left",
            isClick: true,
        },
        {
            label: "事故量",
            prop: "col2",
            headIcon: {
                color: "#ffffff",
                iconCss: "icon-paixu3",
            },
            width: "120",
        },
        {
            label: "定位",
            prop: "col3",
            isClick: true,
            width: "60",
            textColor: "#2EF7FC",
            isIcon: true,
            iconCss: {
                name: "icon-dingwei3",
                color: "#2EF7FC",
            },
        },
    ],
    columns72: [
        {
            label: "时间",
            prop: "title",
        },
        {
            label: "事故标题",
            prop: "col2",
        },
        {
            label: "所属企业",
            prop: "col3",
            row_hidden: true,
        },
        {
            label: "原因",
            prop: "col4",
            row_hidden: true,
        },
        {
            label: "处理方式",
            prop: "col5",
            row_hidden: true,
        },
        {
            label: "事故后果",
            prop: "col6",
        },
        {
            label: "危险度",
            prop: "col7",
            isSlot: true,
        },
        {
            label: "操作",
            prop: "col8",
            isClick: true,
            width: 55,
            textColor: "#2EF7FC",
        },
    ],
};

export { general };
